<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>验证邮箱地址是否已经注册</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		p:not(:empty) {
			padding: 15px;
		}

		.container {
			padding-top: 100px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="form-group">
			<label>邮箱地址</label>
			<input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
		</div>
		<!-- 错误 bg-danger 正确 bg-success -->
		<p id="info"></p>
	</div>
	<script src="/js/ajax.js"></script>
	<script>
		// 获取页面中的元素
		var emailInp = document.getElementById('email');
		var info = document.getElementById('info');

		emailInp.onblur = function () {

			let email = this.value;

			let reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;

			if (!reg.test(email)) {

				info.innerHTML = '请输入符合规则的邮箱地址';
				info.className = 'bg-danger';

				return;
			};

			ajax({
				type: 'get',
				url: '/verifyEmailAdress',
				data: {
					email: email
				},
				success: function (data) {
					console.log(data);
					info.innerHTML = data.message;
					info.className = 'bg-success';

				},
				error: function (data) {

					console.log(data);
					info.innerHTML = data.message;
					info.className = 'bg-danger';
				},

			});
		}
	</script>
</body>

</html>